<?php
@session_start();
include_once 'main.inc.php';
include_once 'functions.php';
include_once 'functions.datastore.php';

$session_key = 'e';

$is_change_year = false;
if (isset($_GET['year'])) {
    $_SESSION[$session_key]['year'] = $_GET['year'];
    $is_change_year = true;
} elseif (!isset($_SESSION[$session_key]['month'])) {
    $_SESSION[$session_key]['year'] = $year_default;
}
$year = $_SESSION[$session_key]['year'];
// Learned
if (!isset($_SESSION[$session_key]['card_info']) || $is_change_year) {
    $card_info = get_en_card_info();
    $_SESSION[$session_key]['card_info'] = $card_info;
}
$card_info = $_SESSION[$session_key]['card_info'];

include_once 'load_vocab.inc.php';
include_once 'inc/cookie.inc.php';

if (isset($_GET['month'])) {
    $_SESSION[$session_key]['month'] = $_GET['month'];
} elseif (!isset($_SESSION[$session_key]['month']) || $is_change_year) {
    $_SESSION[$session_key]['month'] = current(array_keys($vocab->assoc_data));
}
$month = $_SESSION[$session_key]['month'];
if (isset($_GET['day'])) {
    $_SESSION[$session_key]['day'] = $_GET['day'];
} elseif (!isset($_SESSION[$session_key]['day']) || $is_change_year) {
    $_SESSION[$session_key]['day'] = key($vocab->assoc_data[$month]);
}
$day = $_SESSION[$session_key]['day'];
$date_time = strtotime("${year}-${month}-${day}");


?>
<?php
$page = 'index';
$lang = 'en';
include_once('header.inc.php')?>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <?php
            $day_words = $vocab->assoc_data[$month][$day]['words'];
            // Auto-learn mode
            if (!isset($_COOKIE[$session_key.'-auto_learn'])) $_COOKIE[$session_key.'-auto_learn'] = 1;
            $auto_learn = $_COOKIE[$session_key.'-auto_learn'];
            $auto_learn_overturn = ($auto_learn == 1 ? 0 : 1);
            $card_learned_count = 0;
            if (isset($vocab->assoc_data[$month][$day]['learned_count'])) $card_learned_count = $vocab->assoc_data[$month][$day]['learned_count'];
            $show_e = 'show';
            $show_v = 'show';
            $show_a = 'show';
            if ($auto_learn && ($card_learned_count > 0)) {
                $show_e = 'hide';
                $show_v = 'hide';
                $show_a = 'hide';
            }
            ?>
            <div class="panel panel-default pull-right">
                <?php include_once('inc/card_info_panel.inc.php');?>
            </div>
            <h4><?php
                echo date("D, M j", $date_time);
                echo " [{$card_learned_count}]";
                ?>
            </h4>
            <div class="clear"></div>
            <?php
            echo '<div style="float: left">
                    <a class="btn btn-primary btn-sm" href="./" title="Refresh">
                        <span class="glyphicon glyphicon-refresh"></span>
                    </a>
                    <a class="btn btn-primary btn-sm" href="?reload=1" title="Reload remote">
                        <span class="glyphicon glyphicon-repeat"></span>
                    </a>
                    <a id="btn_reset" class="btn btn-default btn-sm" title="Reset card">
                        <span class="glyphicon glyphicon-retweet"></span>
                    </a>
                </div>';
            echo '<div class="btn-group" style="float: right">
                    <a id="btn_auto_learn" class="btn btn-default '.($auto_learn == 1 ? 'active' : '').' btn-sm" title="Shuffle">
                        <span class="glyphicon glyphicon-book"></span>
                    </a>
                    <a id="btn_shuffle" class="btn btn-default '.($shuffle == 1 ? 'active' : '').' btn-sm" title="Shuffle">
                        <span class="glyphicon glyphicon-random"></span>
                    </a>
                    <a class="btn btn-default btn-sm" id="btn_learned" title="Mark as learned">
                        <span class="glyphicon glyphicon-ok"></span>
                    </a>
                </div>';
            echo '<div style="clear: both"></div>
                <hr />';

            echo '<table class="words"><tr><th style="10%">
                <a class="display_mode" id="a_show">
                    <span class="glyphicon ' . ($show_a == 'show' ? 'glyphicon-sort' : 'glyphicon-list') . '"></span>
                </a>
            </th>
            <th style="width: 30%"><a class="display_mode" id="e_show">English</a></th>
            <th style="width: 60%"><a class="display_mode" id="v_show">Vietnamese</a></th></tr>';
            $index = 0;
            foreach ($day_words as $key => $word) {
                $index++;
                echo '<tr id="row_word_' . $index . '" class="word_row">
                <td id="word_operation_' . $index . '" class="word_operation"><a>' . $index . '</a></td>
                <td class="word e_word" id="e_word_' . $index . '"><span class="'.$show_e.'"></span></td>';
                echo '<td class="word v_word" id="v_word_' . $index . '"><span class="'.$show_v.'">';
                echo '</span></td></tr>';
            }
            echo '</table>';
            ?>
        </div>
        <div class="col-md-4 sidebar">
            <nav><strong>Legends:</strong>
                <a class="btn btn-default btn-xs rank-0">0</a>
                <a class="btn btn-default btn-xs rank-1">1+</a>
                <a class="btn btn-default btn-xs rank-3">3+</a>
                <a class="btn btn-default btn-xs rank-6">6+</a>
                <a class="btn btn-default btn-xs rank-10">10+</a>
                <a class="btn btn-default btn-xs rank-15">15+</a>
                <a class="btn btn-default btn-xs rank-21">21+</a>
            </nav><hr />
            <nav>
                <ul>
                    <?php
                    foreach ($vocab->assoc_data as $the_month => $the_day_words) {
                        echo '<li>';
                        echo '<strong>' . $the_month . ':</strong> ';
                        foreach ($the_day_words as $the_day => $the_day_vocab) {
                            $the_day_learned_count = $the_day_vocab['learned_count'];
                            $words = $the_day_vocab['words'];
                            $href = '';
                            $current = ' current';
                            if (($the_month != $month) || ($the_day != $day)) {
                                $href = ' href="?month=' . $the_month . '&day=' . $the_day . '"';
                                $current = '';
                            }
                            $day_word_class = '';
                            if (sizeof($words) < 10) $day_word_class = ' less_words';
                            elseif (sizeof($words) > 10) $day_word_class = ' more_words';
                            echo '<a class="btn btn-default btn-xs rank-' . $the_day_learned_count . $current . $day_word_class . '"' . $href . '>' . $the_day . '</a> ';
                        }
                        echo '</li>';
                    }
                    ?>
                </ul>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <hr />
            <?php echo $loading?>
        </div>
    </div>
</div>

<div class="modal fade word-operation-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">
                    <a id="btn_learned_bookmark" class="btn btn-default btn-sm" title="Reset card">
                        <span class="glyphicon glyphicon-bookmark"></span>
                    </a>
                    <a id="btn_learned_speak" class="btn btn-default btn-sm" title="Reset card">
                        <span class="glyphicon glyphicon-volume-up"></span>
                    </a>
                </h4>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var modal_id = 0;
    var day_words = <?php echo json_encode($day_words)?>;
    var keys;
    var keys_shf;
    var a = '<?php echo $show_a?>', e = "<?php echo $show_e?>", v = "<?php echo $show_v?>";
    var is_shuffled = <?php echo $shuffle?>;
    $(document).ready(function(){
        keys = Object.keys(day_words);
        load_day_words();

        $('.btn-show').click(function(){
            var id = $(this).attr('id');
            var part = id.charAt(0);
            var mode = get_mode(part);
            if($(this).hasClass('active')) {
                $(this).removeClass('active');
                if (mode != 'show') swap(part);
                show_hide(part);
                $.cookie("<?php echo $session_key?>" + part, 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                if (mode == 'show') swap(part);
                show_hide(part);
                $.cookie("<?php echo $session_key?>" + part, 1, { expires : 10 });
            }
        });

        $('#btn_learned').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $.cookie("<?php echo $session_key?>-learned", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                $.cookie("<?php echo $session_key?>-learned", '<?php echo "{$month}-{$day}";?>', { expires : 10 });
            }
        });

        $('#btn_shuffle').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                is_shuffled = 0;
                $.cookie("<?php echo $session_key?>-shuffle", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                is_shuffled = 1;
                $.cookie("<?php echo $session_key?>-shuffle", 1, { expires : 10 });
            }
            load_day_words();
        });
        $('#btn_auto_learn').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $.cookie("<?php echo $session_key?>-auto_learn", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                $.cookie("<?php echo $session_key?>-auto_learn", 1, { expires : 10 });
            }
        });
        $('#btn_reset').click(function(){
            reset_day_words();
        });
    });
    function show_hide(part) {
        var mode = swap(part);
        $('.word').each(function(){
            var span = $('#' + $(this).attr('id') + ' > span');
            if ($(this).attr('id').charAt(0) == part) {
                span.attr('class', mode);
            }
        });
    }
//    function show_all(index) {
//        e = 'show';
//        v = 'show';
//        $('.word').each(function(){
//            var w_index = $(this).attr('id').split('_')[2];
//            if ((index == 0) || (index == w_index)) {
//                var span = $('#' + $(this).attr('id') + ' > span');
//                span.attr('class', 'show');
//            }
//        });
//    }
    function show_hide_all() {
        if (a == 'show') set_mode_a('hide');
        else set_mode_a('show');
        e = a;
        v = a;
        $('.word').each(function(){
//            var w_index = $(this).attr('id').split('_')[2];
//            if ((index == 0) || (index == w_index)) {
                var span = $('#' + $(this).attr('id') + ' > span');
                span.attr('class', a);
//            }
        });
        if (a == 'hide') {
            is_shuffled = true;
            load_day_words();
            reset_learned_layout();
            set_learned_layout();
        }
    }
    function load_day_words() {
        keys_shf = keys.slice();
        if (is_shuffled) shuffle(keys_shf);
        for (i = 0; i < keys_shf.length; i++) {
            $('#e_word_' + (i + 1) + ' > span').html(day_words[keys_shf[i]].decorated_word);
            $('#v_word_' + (i + 1) + ' > span').html(day_words[keys_shf[i]].meaning);
        }
    }
    function reset_day_words() {
        keys_shf = keys.slice();
        is_shuffled = false;
        set_mode_a('show');
        e = 'show';
        v = 'show';
        for (i = 0; i < keys_shf.length; i++) {
            $('#e_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].word);
            $('#v_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].meaning);
            $('#e_word_' + (i + 1) + ' > span').attr('class', a);
            $('#v_word_' + (i + 1) + ' > span').attr('class', a);
        }
        reset_learned_layout();
        clean_day_word_learned();
    }
</script>
<?php include_once('footer.inc.php')?>